<template>
	<view>
		<u-popup  v-model="ordershow" mode="center" width="80%" ref="auth" :mask-close-able="false" :custom="true" :mask-click="false" @close="closeorder">
            <view class="popone">
                <image class="bg" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" mode="" />
                <view class="phonenav">
                    <view class="cha" @click="closeorder">
                        <image class="icon_gbcha" src="@/pages_client/static/img/icon_gbcha.png" mode="" />
                    </view>
                    <text class="jiename">确认接单</text>
                    <text class="queren">确认后请勿随意取消，否则将会扣除信用分</text>
                    <!-- <canvas canvas-id="myCanvas" style="width: 80px; height: 35px;"></canvas>
                    <button @click="drawText">绘制姓名</button>
                    <image :src="imagePath" style="width: 80px; height: 35px;" v-if="imagePath"></image> -->
                    
                    <view class="yuedu" @click.stop="check=!check">
                        <image class="icon_xz_n" v-if="!check" src="@/pages_client/static/img/icon_xz_n.png" mode="" />
                        <image class="icon_xz_n" v-if="check" src="@/pages_client/static/img/icon_xz_s.png" mode="" />
                        <text class="xy">我已阅读并同意<text class="xyhu" @click.stop="navrouter('/pages/my/yhXieyi?key=lhygxy')">《灵活用工协议》</text></text>
                    </view>
                    <view class="dianbtn" @click="getqueren">
                        <text class="bm">确认接单</text>
                    </view>
                    <text class="kaolv"  @click="closeorder">再考虑下</text>
                </view>
            </view>
        </u-popup>
	</view>
</template>

<script>
	export default {
		name: 'ConfirmOrderPop',
		props: {
			ordershow: {
				type: Boolean,
				default: false
			},

		},
		data() {
			return {
                check:true,
                imagePath: '' // 用于存储生成的图片路径:
			};
		},
		created() {
			
		},
		mounted() {

		},
		methods: {
            closeorder(){
                this.$emit("closeorder")
            },
            getqueren(){
                if(!this.check){
                    this.$u.toast("请先勾选协议");
                    return;
                }
                this.$emit("getqueren")
            },
            // drawText() {
            //     // const ctx = uni.createCanvasContext('myCanvas', this);
            //     // ctx.setFontSize(14);
            //     // ctx.setFillStyle('black');
            //     // ctx.fillText('乐坤啊', 0, 0);
            //     // ctx.draw();
                
            // },
            drawText() {
                const ctx = uni.createCanvasContext('myCanvas', this);
                const name = '张三'; // 要绘制的姓名
                const fontSize = 18; // 字体大小，可根据需要调整以适配高度
                const padding = 5; // 文字与边界的间距
                ctx.setFontSize(fontSize);
                ctx.setFillStyle('#000000'); // 设置文字颜色为黑色
                ctx.setTextAlign('center'); // 设置文本居中
                ctx.setTextBaseline('middle'); // 设置文本垂直居中
                ctx.fillText(name, 80 / 2, 35 / 2); // 在Canvas上绘制文本，x坐标为宽度的一半，y坐标为高度的一半
                // ctx.draw(); // 执行绘制操作
                ctx.draw(false, () => {
                    // 绘制完成后，将画布内容转换为图片
                    uni.canvasToTempFilePath({
                    canvasId: 'myCanvas',
                    success: (res) => {
                        this.imagePath = res.tempFilePath; // 保存图片路径到data中，以便在页面上显示
                    },
                    fail: (err) => {
                        console.error('转换失败', err);
                    }
                    });
                });
            },
            toImage() {
                uni.canvasToTempFilePath({
                    canvasId: 'myCanvas',
                    success: function (res) {
                    console.log(res.tempFilePath); // 输出图片的临时路径
                    // 这里可以将图片路径赋值给一个变量，或者直接使用路径显示图片等操作
                    },
                    fail: function (err) {
                    console.error(err);
                    }
                });
            }

		}
	};
</script>

<style lang="scss" scoped>
    /deep/.u-mode-center-box{
        background-color: transparent;
    }
	.popone{
        width: 100%;
        background: #FFFFFF;
        border-radius: 30rpx;
        height: 530rpx;
        .bg{
            position: absolute;
            width: 100%;
            height: 300rpx;
            border-radius: 30rpx 30rpx 0 0 ;
        }
        .icon_gbcha{
            width: 40rpx;
            height: 40rpx;
            margin-left: auto;
            position: absolute;
            right: 30rpx;
            top: 30rpx;
        }
        .yuedu{
            height: 80rpx;
            display: flex;
            padding: 0 30rpx;
            align-items: center;
            .icon_xz_n{
                width: 36rpx;
                height: 36rpx;
                margin-right: 8rpx;
            }
            .xy{
                font-weight: 500;
                font-size: 20rpx;
                color: #999999;
                display: block;
                width: 90%;
            }
            .xyhu{
                color: rgba(234, 89, 24, 1);
            }
        }
        .kaolv{
            font-weight: bold;
            font-size: 28rpx;
            color: #666666;
            display: block;
            text-align: center;
            margin-top: 20rpx;
        }
        .phonenav{
            position: relative;
            // margin: 30rpx;
            display: flex;
            flex-direction: column;
            // justify-content: center;
            align-items: center;
            padding: 40rpx 30rpx;
            .img_aq{
                width: 173rpx;
                height: 211rpx;
                margin-bottom: 20rpx;
            }
            .jiename{
                font-weight: bold;
                font-size: 36rpx;
                color: #111111;
            }
            .queren{
                font-weight: 400;
                font-size: 24rpx;
                color: #666666;
                display: block;
                margin: 40rpx 0 80rpx;
            }
            .chaka{
                padding: 30rpx;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: #F6F7F9;
                border-radius: 16rpx;
                margin: 25rpx 0;
                .chaname{
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #111111;
                }
                .phonenum{
                    display: block;
                    font-weight: bold;
                    font-size: 50rpx;
                    color: #F06047;
                    margin: 10rpx 0;
                }
                .xiugai{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    .noben{
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #666666;
                    }
                    .xiu{
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #F06047;
                        display: inline-block;
                        margin-left: 6rpx;
                    }
                }
            }
            .dianbtn{
                height: 90rpx;
                background: linear-gradient(90deg, #FF8F39, #FF4D43);
                border-radius: 45rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                margin-top: 20rpx;
                .bm{
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #FFFFFF;
                }
                .bmmaio{
                    font-weight: 500;
                    font-size: 20rpx;
                    color: #FFFFFF;
                }
            }
            .bzhang{
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-top: 30rpx;
                .icon_ts{
                    margin-right: 6rpx;
                    width: 24rpx;
                    height: 24rpx;
                }
                .zhiname{
                    font-weight: 400;
                    font-size: 20rpx;
                    color: #F06047;
                }
            }
        }
    }
</style>
